<template>
  <div v-loading="loading">
    <el-tabs v-model="view" v-loading="allLoading" type="border-card">
      <el-tab-pane label="流程图" name="first" lazy>
        <el-image v-if="processPhoto.processDefinitionKey !== 'act_self_built_process'" :src="processPhoto.photoBase64">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
      </el-tab-pane>
      <el-tab-pane label="流程审批人" name="second" lazy>
        <show-flow-assignees :process-definition-key="processDefinitionKey" />
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>

import { showFlowChart } from '@/api/act/process/actProcess'
import ShowFlowAssignees from '@/views/act/process/showFlowAssignees'

export default {
  name: 'ShowFlowChart',
  components: { ShowFlowAssignees },
  props: {
    processDefinitionKey: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      // 遮罩层
      infoOpen: false,
      loading: false,
      processPhoto: {
        // 流程定义的Key
        processDefinitionKey: undefined,
        // 流程图的Base64
        photoBase64: '',
        // 审批人集合
        assigneesArray: []
      }
    }
  },
  computed: {
  },
  watch: {
    processDefinitionKey(val) {
      if (val !== null && val !== 'null' && val !== undefined) {
        this.showFlowChart(val)
      }
    }
  },
  created() {
    if (this.processDefinitionKey !== null && this.processDefinitionKey !== 'null' && this.processDefinitionKey !== undefined) {
      this.showFlowChart(this.processDefinitionKey)
    }
  },
  methods: {
    showFlowChart(processDefinitionKey) {
      this.loading = true
      showFlowChart(processDefinitionKey).then(response => {
        this.processPhoto.photoBase64 = response.data
        this.loading = false
      })
    }
  }
}
</script>
